<template>
	<div class="hello_order">
		<router-view></router-view>
		<!--<div class="order_title clearfix">
			<span @click="goBack" class="left">返回</span>
			<div>我的订单</div>
		</div>
		<div class="order_data">
			<ul class="order_item clearfix">
				<li class="left">全部</li>
				<li class="left">未支付</li>
				<li class="left">已支付</li>
			</ul>
			<div class="obligation">
				<div class="clearfix obligation_title">
					<div class="left game_name">赛事名称</div>
					<div class="right no_pay">待支付</div>
				</div>
				<div class="clearfix order_contant" @click="goOrderDetail">
					<img src="../../../assets/u5020.png" class="left" alt="" />
					<div class="left">
						<div class="username">王静</div>
						<div class="level">5段</div>
					</div>
					<div class="right  obligation_money">￥600.00</div>
				</div>
				<div class="clearfix order_contant">
					<img src="../../../assets/u5020.png" class="left" alt="" />
					<div class="left">
						<div class="username">王静</div>
						<div class="level">5段</div>
					</div>
					<div class="right  obligation_money">￥600.00</div>
				</div>
				<div class="  obligation_total">
					合计:<span>￥1200.00</span>
				</div>
				<div class="payment">
					<button>取消订单</button>
					<button>好友代付</button>
					<button>微信付款</button>
				</div>
			</div>
			<div class="paid">
				<div class="clearfix paid_title">
					<div class="left game_name">赛事名称</div>
					<div class="right pay">已支付</div>
				</div>
				<div class="clearfix order_contant">
					<img src="../../../assets/u5020.png" class="left" alt="" />
					<div class="left">
						<div class="username">王静</div>
						<div class="level">5段</div>
					</div>
					<div class="right  paid_money">￥600.00</div>
				</div>
				<div class="clearfix order_contant">
					<img src="../../../assets/u5020.png" class="left" alt="" />
					<div class="left">
						<div class="username">王静</div>
						<div class="level">5段</div>
					</div>
					<div class="right  paid_money">￥600.00</div>
				</div>
				<div class="paid_total">
					合计:<span>￥1200.00</span>
				</div>
				
			</div>
		</div>-->

	</div>
	
</template>

<script>
	import { Tabbar, TabItem } from 'mint-ui';
	export default{
		data() {
			return {
				selected:true
			}
		},
		methods:{
			goBack:function(){
				this.$router.push({path:'/myapp'})
			},
			goOrderDetail:function(){
				this.$router.push({path:'/orderdetail'})
			},
			goTotal:function(){
				this.$router.push({path:'/total'})
			},
			goNopay:function(){
				this.$router.push({path:'/nopay'})
			},
			goTotal:function(){
				this.$router.push({path:'/paid'})
			},
		}
	}
</script>

<style>
	html,body{
		font-size: 0.3rem;
		margin:0;
		padding: 0;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right;
}

.order_title{
	background: #4682B4;
	font-size: 0.3rem;
	color: #fff;
	padding: 20px;
}
.order_title>div{
	text-align: center;
}
.order_item{
	margin: 0;
	padding: 0;
}
.order_item >li{
	list-style: none;
	width: 33%;
	padding: 20px 0;
	font-size: 0.3rem;
	text-align: center;
}
.order_item >li:hover{
	border-bottom: 1px solid #0000FF;
}
.game_name{
	font-weight: 600;
}
.order_contant{
	background: #f2f2f2;
	padding: 10px;
	margin-bottom: 5px;
}
.order_contant>img{
	height: 1rem;
}
.order_contant>div{
	margin-left: 20px;
}
.obligation_money,.paid_money{
	line-height: 44px;
}
.obligation_total,.paid_total{
	width: 100%;
	padding: 20px 0;
	
	text-align: right;
	border-bottom: 1px solid #ccc;
}
.obligation_total>span,.paid_total>span{
	margin-right:20px ;
}
.payment{
	width: 100%;
	text-align: right;
	padding: 10px 0;
}
.payment>button{
	padding: 5px 10px;
	border: 1px solid #000;
	background: #fff;
	border-radius: 5px;
	font-weight: 600;
	margin: 5px;
}
.paid{
	border-top:5px solid #ccc;
}
.obligation{
	border-top: 1px solid #ccc;
}
.paid_title,.obligation_title{
	padding: 20px;
}
.no_pay,.pay{
	color:#0000FF;
}
</style>